<template>
     <div>
         <basicChart :obj-prop="obj" ></basicChart>
     </div>
</template>

<script>
    import basicChart from "./basicChart";
    import * as category from "../../api/category";

    export default {
        components:{
            basicChart
        },
        data(){
            return{
               obj:{
                   option : {
                       title: {
                           text: '宠物种类分布',
                           // subtext: '纯属虚构',
                           left: 'center'
                       },
                       tooltip: {
                           trigger: 'item'
                       },
                       legend: {
                           orient: 'vertical',
                           left: 'left'
                       },
                       series: [
                           {
                               name: '种类',
                               type: 'pie',
                               radius: ['40%', '70%'],
                               avoidLabelOverlap: false,
                               itemStyle: {
                                   borderRadius: 10,
                                   borderColor: '#fff',
                                   borderWidth: 2
                               },
                               label: {
                                   show: false,
                                   position: 'center'
                               },
                               emphasis: {
                                   label: {
                                       show: true,
                                       fontSize: '40',
                                       fontWeight: 'bold'
                                   }
                               },
                               labelLine: {
                                   show: false
                               },
                               data: []
                           }
                       ]
                   },
                   chartData: [
                       {"value": 2, "name": '猫咪'},
                       {"value": 1, "name": '小狗'},
                   ],
                   boxHeight: "400px",
                   boxWidth: "500px"
               }
            }
        },
        methods:{
            initData(){
                let data=[]
                category.getCategory().then(function (response) {
                    let result =response.data.data
                    for (let dataKey in result) {
                        let one = {}
                        one['value']=result[dataKey].number
                        one['name']=result[dataKey].name
                        data.push(one)
                    }
                })
              return data
            }
        },
        mounted() {
            this.obj.chartData= this.initData()
        },
        watch:{
            chartData(){
               this.obj.option.series[0].data=  this.obj.chartData
            }
        }

    }
</script>

<style scoped>

</style>
